<!-- 管理员侧边栏 -->
<template>
  <div :class="{ darkTheme: darkMode }" style="width: 100vw; height: 100vh">
    <div class="layout">
      <!-- 左侧模块 -->
      <div class="left">
        <div class="logo">渝展红图</div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="rgb(5,17,55)"
          text-color="rgb(255,255,255)"
        >
          <el-menu-item index="1" @click="toHome">
            <el-icon><HomeFilled /></el-icon>
            <template #title>返回前台</template>
          </el-menu-item>
          <el-menu-item index="2" @click="toTerritory">
            <el-icon><Location /></el-icon>
            <template #title>区域管理</template>
          </el-menu-item>
          <el-menu-item index="3" @click="toAnswer">
            <el-icon><Document /></el-icon>
            <template #title>题目管理</template>
          </el-menu-item>
          <el-menu-item index="3" @click="toproduct">
            <el-icon><Document /></el-icon>
            <template #title>产品管理</template>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧模块 -->
      <div class="right">
        <!-- 顶部导航栏 -->
        <div class="rightHeader">
          <el-icon
            :size="40"
            @click="isCollapse = false"
            v-if="isCollapse == true"
          >
            <Expand />
          </el-icon>
          <el-icon
            :size="40"
            @click="isCollapse = true"
            v-if="isCollapse == false"
          >
            <Fold />
          </el-icon>
          <div class="search">
            <span class="time" style="font-weight: 600; color: #2e5ebf">{{
              nowTime
            }}</span>
          </div>
          <div class="components">欢迎 :)</div>
          <div class="switchPlace">
            <div id="box">
              <div class="switch">
                <div class="item2" id="switchitem2" @click="clickstate">
                  <div id="ONLeft">
                    <div class="text1">
                      <img class="sun" src="../assets/太阳-风.svg" />
                    </div>
                  </div>
                  <div id="OFFRight">
                    <div class="text2">
                      <img class="moon" src="../assets/月亮.svg" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 内容 -->
        <div class="router">
          <router-view class="tables"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/componentStyles.css";
import { Search } from "@element-plus/icons-vue";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      Search,
      isCollapse: false,
      state: false,
      darkMode: false,
      datas: {
        year: null,
        month: null,
        day: null,
        hours: null,
        minutes: null,
        seconds: null,
      },
      nowTime: null,
    };
  },
  methods: {
    getNowTime() {
      setInterval(() => {
        const now = new Date();
        const year = now.getFullYear();
        const month = ("0" + (now.getMonth() + 1)).slice(-2);
        const day = ("0" + now.getDate()).slice(-2);
        const hours = ("0" + now.getHours()).slice(-2);
        const minutes = ("0" + now.getMinutes()).slice(-2);
        const seconds = ("0" + now.getSeconds()).slice(-2);
        this.nowTime =
          year +
          "年" +
          month +
          "月" +
          day +
          "日" +
          hours +
          ":" +
          minutes +
          ":" +
          seconds;
      }, 1000);
    },
    clickstate() {
      this.state = !this.state;
      var switchitem2 = document.getElementById("switchitem2");
      var OFFRight = document.getElementById("OFFRight");
      var ONLeft = document.getElementById("ONLeft");
      if (this.state) {
        switchitem2.style.backgroundColor = "#fff";
        OFFRight.style.transform = "translate(0)";
        ONLeft.style.transform = "translate(-100%)";
      } else {
        switchitem2.style.backgroundColor = "#000";
        OFFRight.style.transform = "translate(100%)";
        ONLeft.style.transform = "translate(0)";
      }
      if (this.state) {
        this.darkMode = true;
      } else {
        this.darkMode = false;
      }
    },

    // 返回首页
    toHome() {
      this.$router.push({ name: "home" });
    },
    // 区域管理
    toTerritory() {
      this.$router.push({ name: "TerritoryManagement" });
    },
    // 区域管理
    toAnswer() {
      this.$router.push({ name: "AnswerManagement" });
    },
    toproduct() {
      this.$router.push({ name: "productAdmin" });
    },
  },
  mounted() {
    this.getNowTime();
  },
};
</script>

<style lang="less" scoped>
/* 深色主题切换 */
.darkTheme {
  background-color: rgb(20, 20, 20) !important;
  color: rgb(207, 211, 220) !important;
  transition: all 0.4s linear;
}

/* 使用深度选择器（deep selector）来影响子元素 */
.darkTheme ::v-deep * {
  background-color: inherit !important;
  color: inherit !important;
}

.tables {
  height: 100%;
  width: 98%;
  padding: 1%;
  background-color: #ffffff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* body */
.layout {
  display: flex;
  justify-content: space-between;
  background-color: rgba(241, 242, 247);
  width: 100vw;
  height: 100vh;
}

/deep/ .el-icon:hover {
  transition: all 0.2s linear;
  transform: scale(1.2);
  cursor: pointer;
}

/* 标题 */
.title {
  text-align: center;
  padding: 20px;
  font-size: 20px;
  background-color: #000000;
  color: #ffffff;
}

/* 菜单栏宽度 */
.el-col-12 {
  max-width: 100%;
}

.left {
  background-color: rgb(5, 17, 55);
  /* background-color: rgb(69, 116, 193); */
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  overflow: auto;
  position: relative;
  border-right: solid 1px var(--el-menu-border-color);
}

.el-menu {
  border-right: none !important;
  overflow: auto;
  font-weight: 550;
  /* background-color: rgb(69, 116, 193); */
}

.el-sub-menu__title * {
  font-size: 17px;
}

.el-menu-item:hover {
  background-color: rgb(48, 119, 243) !important;
  border-right: 5px solid rgb(240, 246, 244);
}

.el-menu-item:hover {
  background-color: rgb(48, 119, 243) !important;
  border-right: 5px solid rgb(240, 246, 244);
  transition: all 0.2s linear;
}

.el-menu::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

.el-menu::-webkit-scrollbar-track {
  border-radius: 10px;
}

.el-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0 rgba(204, 204, 204);
  background-color: rgba(204, 204, 204);
}

.logo {
  padding: 10px;
  top: 0;
  height: 100px;
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* 管理表 */
.right {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  margin: 0px 1% 0px 1%;
}

.router {
  margin-top: 10px;
  width: 100%;
  flex: 1;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.rightHeader {
  height: 40px;
  width: 100%;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.rightHeader .el-icon svg {
  font-size: 25px !important;
}

.search {
  height: 100%;
  width: 40%;
  margin-left: 1%;
  display: flex;
  align-items: center;
}

.switchPlace {
  height: 80%;
  width: 85px;
  margin-right: 10px;
}

.switch {
  width: 100%;
  height: 100%;
}

#box {
  width: 100%;
  height: 100%;
}

.item2 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 90px;
  border: solid 1px #000;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
}

.item2 .sun {
  width: 30px;
  height: 30px;
}

.item2 .moon {
  width: 20px;
  height: 20px;
}

.text1 {
  color: #fff;
  font-weight: 800;
  position: absolute;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
}

.text2 {
  color: #000;
  font-weight: 800;
  position: absolute;
  right: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
}

#ONLeft {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0);
  width: 100%;
  height: 100%;
  border-radius: 90px;
  background-color: #fff;
  transition: all 1s;
  display: flex;
  align-items: center;
}

#OFFRight {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%);
  width: 100%;
  height: 100%;
  border-radius: 90px;
  background-color: #000;
  transition: all 1s;
  display: flex;
  align-items: center;
}

.components {
  width: 100px;
  height: auto;
  display: flex;
  justify-content: space-around;
  margin-left: auto;
  margin-right: 10px;
}

.adminTop {
  height: 100px;
  background-color: #d7a8a8;
}
.icon_img {
  width: 20px;
  margin-right: 10px;
}
</style>
